import React, { useState, useRef } from 'react';
import { Form, Input, Select, Button, Typography, Spin, message, Card, Row, Col, Divider } from 'antd';
import { CopyOutlined, DownloadOutlined, EyeOutlined } from '@ant-design/icons';
import type { SelectProps } from 'antd';
import CommonTour, { TourGuideButton } from '@/components/CommonTour';

const { Title, Paragraph, Text } = Typography;
const { TextArea } = Input;
const { Option } = Select;

// 定义润色风格选项
const refinementStyles = [
  { value: 'professional', label: '专业学术', description: '适合学术论文、研究报告等正式场合' },
  { value: 'accessible', label: '通俗易懂', description: '用简单易懂的语言表达复杂内容' },
  { value: 'concise', label: '简洁凝练', description: '去除冗余，使表达更简洁有力' },
  { value: 'elegant', label: '流畅优美', description: '提升语言美感，增强可读性' },
  { value: 'persuasive', label: '说服力强', description: '增强论点的说服力和感染力' },
  { value: 'storytelling', label: '故事化', description: '将内容转化为更有吸引力的故事形式' },
  { value: 'technical', label: '技术严谨', description: '适合技术文档，注重精确性和专业性' },
  { value: 'creative', label: '创意文学', description: '富有文学性和创意的表达方式' },
];

/**
 * 风格润色功能
 * 根据选择的风格对文本进行润色处理
 */
const StyleRefinementPage: React.FC = () => {
  const [tourVisible, setTourVisible] = useState(false);
  
  // 使用HTML元素的ref引用方式
  const originalTextRef = useRef<HTMLDivElement>(null);
  const styleSelectRef = useRef<HTMLDivElement>(null);
  const refinementButtonRef = useRef<HTMLDivElement>(null);
  const resultCardRef = useRef<HTMLDivElement>(null);
  const copyButtonRef = useRef<HTMLDivElement>(null);
  
  // 显示引导
  const showTour = () => {
    // 延迟显示，确保DOM已经渲染
    setTimeout(() => {
      setTourVisible(true);
    }, 100);
  };
  
  // 定义steps配置
  const tourSteps = [
    {
      key: 'originalText',
      title: '输入需要润色的文本',
      description: '在这里输入您想要润色的原始文本内容，支持最多5000个字符。',
    },
    {
      key: 'styleSelect',
      title: '选择润色风格',
      description: '从多种专业风格中选择适合您需求的润色风格，不同风格会产生不同的表达方式。',
    },
    {
      key: 'refinementButton',
      title: '开始润色',
      description: '点击此按钮开始进行文本润色，系统将根据您选择的风格生成润色后的内容。',
    },
    {
      key: 'resultCard',
      title: '润色结果展示区',
      description: '润色后的文本将显示在这里，您可以查看、比较原文与润色后的差异。',
    },
    {
      key: 'copyButton',
      title: '复制/下载功能',
      description: '使用这些按钮可以方便地复制或下载润色后的文本内容。',
    },
  ];

  // 组织ref引用
  const tourRefs = {
    originalText: originalTextRef,
    styleSelect: styleSelectRef,
    refinementButton: refinementButtonRef,
    resultCard: resultCardRef,
    copyButton: copyButtonRef,
  };
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);
  const [refinedContent, setRefinedContent] = useState('');
  const [selectedStyle, setSelectedStyle] = useState<string>('professional');
  const [showOriginal, setShowOriginal] = useState(false);

  // 处理风格选择变化
  const handleStyleChange: SelectProps['onChange'] = (value) => {
    if (typeof value === 'string') {
      setSelectedStyle(value);
    }
  };

  // 处理表单提交，润色文本
  const handleSubmit = async () => {
    try {
      const values = await form.validateFields();
      const originalText = values.originalText || '';
      
      if (!originalText.trim()) {
        message.warning('请输入需要润色的文本');
        return;
      }
      
      setLoading(true);
      setRefinedContent('');
      
      // 模拟API调用延迟
      setTimeout(() => {
        // 生成润色后的内容
        const refined = refineText(originalText, selectedStyle);
        setRefinedContent(refined);
        setLoading(false);
        message.success('文本润色成功！');
      }, 2000);
    } catch (error) {
      setLoading(false);
      message.error('润色失败，请重试');
    }
  };

  // 润色文本的模拟函数
  const refineText = (text: string, style: string): string => {
    // 这里是模拟润色逻辑，实际应用中应该调用AI模型
    const styleTransformers: Record<string, (t: string) => string> = {
      'professional': (t) => {
        // 专业学术风格 - 增加专业术语，使表达更严谨
        return `研究表明，${t}这一现象具有重要的理论和实践意义。通过系统分析可以发现，该问题涉及多个关键维度，包括理论基础、方法论框架以及实证研究结果。本文旨在从学术视角深入探讨这一议题，为相关领域的研究提供新的思路和见解。`;
      },
      'accessible': (t) => {
        // 通俗易懂风格 - 简化语言，使用日常表达
        return `简单来说，${t}其实就是我们生活中常见的一种现象。打个比方，就像我们每天喝水吃饭一样，这个概念在生活中无处不在。只要我们稍微留意一下，就能发现它在各个方面都发挥着重要作用。`;
      },
      'concise': (t) => {
        // 简洁凝练风格 - 去除冗余，保留核心信息
        return `${t}的核心是简化复杂问题，提升效率与质量。关键在于把握本质，避免不必要的细节。实践证明，简洁的表达更易被理解和接受。`;
      },
      'elegant': (t) => {
        // 流畅优美风格 - 提升语言美感，增强可读性
        return `在岁月的长河中，${t}如同璀璨的明珠，照亮了我们探索未知的道路。它不仅是知识的载体，更是智慧的结晶。当我们细细品味其中的深意，仿佛置身于思想的花园，感受着语言的魅力与力量。`;
      },
      'persuasive': (t) => {
        // 说服力强风格 - 增强论点的说服力和感染力
        return `毫无疑问，${t}是解决当前问题的最佳选择。大量事实证明，采用这一方法能够显著提升效果，实现预期目标。我们有充分的理由相信，只要坚定不移地贯彻这一方针，就一定能够取得令人瞩目的成就。`;
      },
      'storytelling': (t) => {
        // 故事化风格 - 将内容转化为更有吸引力的故事形式
        return `故事要从一个平凡的早晨说起。那天，当阳光透过窗户洒进房间时，我突然意识到${t}这个概念背后蕴含着一个令人着迷的故事。这个故事不仅关乎知识的传承，更关乎人类对美好事物的不懈追求...`;
      },
      'technical': (t) => {
        // 技术严谨风格 - 适合技术文档，注重精确性和专业性
        return `本研究基于${t}原理，通过实验验证了以下结论：1) 在特定条件下，系统性能提升了约37.5%；2) 误差范围控制在±0.02以内；3) 稳定性测试结果表明，系统连续运行72小时无异常。这些数据进一步优化算法提供了重要依据。`;
      },
      'creative': (t) => {
        // 创意文学风格 - 富有文学性和创意的表达方式
        return `当思想的火花碰撞出${t}的绚烂光芒，我们仿佛看到了一个全新的世界在眼前展开。想象力如同灵巧的双手，将平凡的文字编织成华美的篇章。在这个充满无限可能的语言王国里，每一个词汇都蕴含着创造奇迹的力量。`;
      },
    };
    
    const transformer = styleTransformers[style] || ((t) => t);
    return transformer(text);
  };

  // 复制润色后的内容
  const handleCopy = () => {
    if (!refinedContent) {
      message.warning('没有可复制的内容');
      return;
    }
    
    navigator.clipboard.writeText(refinedContent).then(() => {
      message.success('内容已复制到剪贴板');
    }).catch(() => {
      message.error('复制失败，请手动复制');
    });
  };

  // 下载润色后的内容
  const handleDownload = () => {
    if (!refinedContent) {
      message.warning('没有可下载的内容');
      return;
    }
    
    const blob = new Blob([refinedContent], { type: 'text/plain;charset=utf-8' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = '润色后的文本.txt';
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
    message.success('内容已下载');
  };

  // 清空所有内容
  const handleClear = () => {
    form.resetFields();
    setRefinedContent('');
    setSelectedStyle('professional');
    setShowOriginal(false);
  };

  // 获取当前选择的风格描述
  const getSelectedStyleDescription = (): string => {
    const selected = refinementStyles.find(style => style.value === selectedStyle);
    return selected ? selected.description : '';
  };

  return (
   <>
    <div style={{ padding: '24px' }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '16px' }}>
        <Typography>
          <Title level={1}>风格润色<TourGuideButton onClick={showTour} /></Title>
        </Typography>
      </div>
      <Typography>
        <Paragraph>
          输入需要润色的文本，选择合适的风格，AI将为您生成润色后的高质量内容。
        </Paragraph>
      </Typography>

      <Row gutter={[16, 16]}>
        <Col xs={24} lg={12}>
          <Card title="文本输入与设置" size="small">
            <Form
              form={form}
              layout="vertical"
            >
              <Form.Item
                label="原始文本"
                name="originalText"
                rules={[{ required: true, message: '请输入需要润色的文本' }]}
              >
                <div ref={originalTextRef}>
                <TextArea
                  rows={12}
                  placeholder="请输入您需要润色的文本内容"
                  maxLength={5000}
                  showCount
                />
              </div>
              </Form.Item>

              <Form.Item
                label="润色风格"
                name="refinementStyle"
              >
                <div ref={styleSelectRef}>
                <Select
                  placeholder="请选择润色风格"
                  value={selectedStyle}
                  onChange={handleStyleChange}
                  style={{ width: '100%' }}
                >
                  {refinementStyles.map(style => (
                    <Option key={style.value} value={style.value}>
                      {style.label}
                    </Option>
                  ))}
                </Select>
              </div>
              </Form.Item>

              <div style={{ marginBottom: '16px' }}>
                <Text type="secondary">风格描述：</Text>
                <Text>{getSelectedStyleDescription()}</Text>
              </div>

              <Row gutter={[8, 8]}>
                <Col span={12}>
                  <div ref={refinementButtonRef}>
                    <Button
                      type="primary"
                      onClick={handleSubmit}
                      loading={loading}
                      block
                    >
                    {loading ? '润色中...' : '开始润色'}
                    </Button>
                  </div>
                </Col>
                <Col span={12}>
                  <Button
                    onClick={handleClear}
                    block
                  >
                    清空内容
                  </Button>
                </Col>
              </Row>
            </Form>
          </Card>
        </Col>

        <Col xs={24} lg={12}>
          <Card 
            title="润色结果" 
            size="small"
            extra={
              refinedContent ? (
                <Button
                  type="text"
                  icon={<EyeOutlined />}
                  onClick={() => setShowOriginal(!showOriginal)}
                >
                  {showOriginal ? '显示润色后' : '显示原文'}
                </Button>
              ) : null
            }
          >
            {loading ? (
              <div style={{ textAlign: 'center', padding: '60px 0' }}>
                <Spin size="large" />
                <p style={{ marginTop: '16px' }}>正在润色文本，请稍候...</p>
              </div>
            ) : refinedContent ? (
              <div>
                <div ref={resultCardRef}>
                {showOriginal ? (
                  <div>
                    <Text type="secondary" strong>原始文本：</Text>
                    <div style={{ 
                      backgroundColor: '#f5f5f5', 
                      padding: '16px', 
                      borderRadius: '4px',
                      marginBottom: '16px',
                      maxHeight: '400px',
                      overflowY: 'auto'
                    }}>
                      <pre style={{ whiteSpace: 'pre-wrap', wordWrap: 'break-word', margin: 0 }}>
                        {form.getFieldValue('originalText') || ''}
                      </pre>
                    </div>
                    <Divider />
                    <Text type="secondary" strong>润色后文本：</Text>
                    <div style={{ 
                      backgroundColor: '#e6f7ff', 
                      padding: '16px', 
                      borderRadius: '4px',
                      maxHeight: '400px',
                      overflowY: 'auto'
                    }}>
                      <pre style={{ whiteSpace: 'pre-wrap', wordWrap: 'break-word', margin: 0 }}>
                        {refinedContent}
                      </pre>
                    </div>
                  </div>
                ) : (
                  <div style={{ 
                    backgroundColor: '#e6f7ff', 
                    padding: '16px', 
                    borderRadius: '4px',
                    minHeight: '400px',
                    maxHeight: '600px',
                    overflowY: 'auto'
                  }}>
                    <pre style={{ whiteSpace: 'pre-wrap', wordWrap: 'break-word' }}>
                      {refinedContent}
                    </pre>
                  </div>
                )}
                </div>
                <div style={{ marginTop: '16px', textAlign: 'right' }}>
                  <div ref={copyButtonRef}>
                    <Button
                      type="primary"
                      icon={<CopyOutlined />}
                      onClick={handleCopy}
                      style={{ marginRight: '8px' }}
                    >
                    复制内容
                  </Button>
                  <Button
                    icon={<DownloadOutlined />}
                    onClick={handleDownload}
                  >
                    下载内容
                    </Button>
                  </div>
                </div>
              </div>
            ) : (
              <div style={{ textAlign: 'center', padding: '60px 0', color: '#999' }}>
                润色后的文本将显示在这里
              </div>
            )}
          </Card>
        </Col>
      </Row>
    </div>
    <CommonTour
        open={tourVisible}
        onClose={() => setTourVisible(false)}
        steps={tourSteps}
        targetRefs={tourRefs}
      />
   </>
  );
};

export default StyleRefinementPage;